<template>
  <div>
    <el-card>
      <el-row>
        <div class="table-header-options">
          <el-button type="primary" :icon="Plus" @click="open(DialogEnum.ADD)">新增</el-button>
          <el-button type="primary" :icon="EditPen" @click="open(DialogEnum.UPDATE)">
            修改
          </el-button>
          <el-button type="danger" :icon="Delete" v-button="['sys:menu:delete']">删除</el-button>
          <el-button type="success" :icon="Search">查询</el-button>
        </div>
      </el-row>
      <el-row>
        <el-table :data="tableList" :border="true">
          <el-table-column prop="userName" label="姓名" />
          <el-table-column prop="nickName" label="昵称" />
        </el-table>
      </el-row>
    </el-card>
    <add v-if="show(DialogEnum.ADD)" :show="show(DialogEnum.ADD)" @close="close()" />
    <update v-if="show(DialogEnum.UPDATE)" :show="show(DialogEnum.UPDATE)" @close="close()" />
  </div>
</template>

<script setup lang="ts">
import { Plus, Delete, EditPen, Search } from "@element-plus/icons-vue";
import add from "@/views/sys/dept/add.vue";
import update from "@/views/sys/dept/update.vue";
import { DialogEnum } from "@/enums/DialogModalEnum";
import DeptApi, { DeptList } from "@/api/sys/dept";
defineOptions({
  name: "dept",
  inherititems: false,
});
const tableList = ref<DeptList[]>([]);

onMounted(() => {
  query();
});

//查询条件
const listQuery = ref({
  searchString: "",
});

// 分页数据
const paginationData = reactive({
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

const query = async () => {
  const { dataList, totalCount } = await DeptApi.query({
    ...listQuery.value,
    ...paginationData,
  });
  tableList.value = dataList;
  paginationData.total = totalCount;
};

const openOption = ref("");
const open = (option: string) => {
  openOption.value = option;
};

const show = (option: string): boolean => {
  return openOption.value == option;
};

const close = () => {
  openOption.value = "";
};
</script>
